<template>
  <div class="theme-active-text-color content">
    <div class="new_title">新闻/公告</div>
    <div class="article">
      <div v-for="(item,index) in articleList" :key="index" class="article_box" @click="toDetail(item.id)">
        <div class="title">{{item.title}}</div>
        <div class="des">简介:{{item.des}}</div>
        <div class="time">发布时间:{{item.time | filterTime}}</div>
      </div>
    </div>
    
    
  </div>
</template>

<script>
import { articleListApi } from "@/api"
export default {
  name: "",
  components: {},
  data() {
    return {
      
      articleList:[]
    };
  },
  created() {
    this.getArticleList()
  },
  filters:{
    filterTime(val){
      let time = new Date(val)
      let year = time.getFullYear()
      let mouth = time.getMonth()+1
      let date = time.getDate()
      return year+'-'+mouth+'-'+date
    }
  },
  methods: {
     async getArticleList(){
      let res = await articleListApi()
      if(res){
        console.log(res);
        this.articleList = res.data
      }
    },

    toDetail(id){
      this.$router.push({
        path:"articleDetail",
        query:{
          id:id
        }
      })
    }
     
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  flex-direction: column;

  .new_title{
    color: rgb(253, 251, 251);
    font-size: .2rem;
    width: 100%;
    height: 50px;
    background: rgb(52, 69, 92);
    line-height: 50px;
    padding-left: 30px;
  }
  .article{
    padding-top: 30px;
    font-size: .2rem;
    color: rgb(46, 46, 46);

    .article_box{
      cursor: pointer;
      width: 94%;
      height: 130px;
      margin: 10px auto;
      padding-left: 15px;
      border-bottom: 1px solid rgb(233, 231, 231);
      .title{
        font-size: .23rem;
        color: #000;
        font-weight: 600;
        padding-top: 15px;
      }
      .des{
        font-size: .15rem;
        color: rgb(161, 161, 161);
        padding-top: 10px;
      }
       .time{
        font-size: .12rem;
        color: rgb(161, 161, 161);
        padding-top: 18px;
      }
      
    }
  }
  
  
}

</style>